<template>
  <div class="content">
    <div class="header" v-if="classifications.storegoodsclass && classifications.storegoodsclass.length">
      <h2>全部分类</h2>
    </div>
    <ul>
      <li
        @click="goClass(item.storegc_id,params.store_id)"
        v-for="(item, index) in classifications.storegoodsclass"
        :key="index"
      >
        <!-- <img :src="item.pic" alt /> -->
        <img v-bind:src="item.storegc_img" alt />
        <p :class="item.storegc_id == gc_id? active : ''">{{item.storegc_name}}</p>
      </li>
    </ul>
    <div v-if="imgSrc && imgSrc.length" @click="goAdvertisement(0)">
      <img :src="imgSrc[0]? this.imgSrc[0].imgUrl : ''" alt />
    </div>
    <store-list title="店铺推荐" :storegcId="gc_id" v-if="!is_show"></store-list>

    <store-product-list :items="rec_goods_list" v-if="rec_goods_list && rec_goods_list.length"></store-product-list>
    <div class="noCommodity" v-if="!rec_goods_list.length">暂无相关商品</div>
    <div v-if="imgSrc && imgSrc.length" @click="goAdvertisement(1)">
      <img :src="imgSrc[1]? this.imgSrc[1].imgUrl : ''" alt />
    </div>
    <store-list title="新品上架" :storegcId="gc_id" v-if="!is_show"></store-list>
    <store-product-list :items="storegoodsclass" v-if="storegoodsclass && storegoodsclass.length"></store-product-list>
    <div class="noCommodity" v-if="!storegoodsclass.length">暂无相关商品</div>
    <!-- <store-class-body :title="title" :items="storeCla" v-if="is_show"></store-class-body> -->
    <no-more></no-more>
  </div>
</template>
<script>
import {
  getStoreGoodsClass,
  getStoreGoodsList,
  classification,
  searchGoodsByCate,
} from "../../../api/homestoredetail";
import StoreList from "./StoretList";
import StoreClassBody from "./StoreClassBody";
import NoMore from "../../NoMore";
import StoreProductList from "./StoreProductList";

export default {
  name: "StoreClass",
  data() {
    return {
      storeCla: "",
      is_show: false,
      title: "",
      rec_goods_list: "",
      storegoodsclass: "",
      active: "active",
      gc_id: "0",
      params: {
        store_id: this.$route.query.id ? this.$route.query.id : "",
        gc_id: this.$route.query.gc_id ? this.$route.query.gc_id : "",
        is_exchange: 0,
        is_hot: 0,
        activity: null,
        sort_key: this.$route.query.sort_key ? this.$route.query.sort_key : "", // 排序键
        sort_order: this.$route.query.sort_order
          ? this.$route.query.sort_order
          : "", // 排序键, //排序值
        page: 0,
        keyword: this.$route.query.keyword ? this.$route.query.keyword : "",
      },
    };
  },
  props: ["classifications", "imgSrc"],
  created() {
    // this.imgSrc[0].imgUrl = undefined;
    console.log(this.imgSrc[22]? this.imgSrc[22].imgUrl : '')
    this.searchGoodsByCate();
  },
  methods: {
     receiveMessage(event) {
        console.log("event", event);
      },
    goAdvertisement(index) {
      if (this.imgSrc[index].link != "") {
        if (this.imgSrc[index].type == 2) {
          this.$router.push({
            name: "HomeGoodsdetail",
            query: { goods_id: this.imgSrc[index].link },
          });
        } else {
          window.location.href = this.imgSrc[index].link;
        }
      }else{
        return;
      }
    },
    goClass(gc_id = 0, storeId) {
      this.$router.push({
        name: "HomeSearchClass",
        query: { storeId: storeId, storegcId: gc_id },
      }); //分类页面
      // return;

      // this.gc_id = gc_id;
      // console.log(this.gc_id);
      // setTimeout(() => {
      //   searchGoodsByCate(this.params.store_id, this.gc_id).then((res) => {
      //     console.log(res);
      //     if (res.code == 10000) {
      //       this.rec_goods_list = res.result.commend_list; //commend_list   new_list
      //       this.storegoodsclass = res.result.new_list;
      //     }
      //   });
      // }, 100);
    },
    searchGoodsByCate() {
      searchGoodsByCate(this.params.store_id).then((res) => {
        console.log(res);
        if (res.code == 10000) {
          this.rec_goods_list = res.result.commend_list; //commend_list   new_list
          this.storegoodsclass = res.result.new_list;
        }
      });
    },

    getClassData(e) {
      classification(this.$route.query.id, e).then((res) => {
        this.storeCla = res.result.goods_list;
      });
    },
    getGoodsList(ispush) {
      getStoreGoodsList(this.params).then((res) => {
        if (res.result.hasmore) {
          this.isMore = true;
        } else {
          console.log(this.isMore);
          this.isMore = false;
        }
        console.log(this.isMore);
        if (this.storeCla.length) {
          this.storeCla = this.storeCla.concat(res.result.goods_list);
        } else {
          this.storeCla = res.result.goods_list;
        }
        console.log(this.storeCla);
      });
    },
  },
  components: {
    StoreList,
    StoreClassBody,
    StoreProductList,
    NoMore,
  },
};
</script>
<style scoped>
.active {
  color: #3c7c45;
}
.noCommodity {
  width: 100%;
  height: 5rem;
  line-height: 5rem;
  color: #999;
  text-align: center;
  background: rgba(205, 205, 205, 0.5);
  margin-bottom: 0.5rem;
}
div img {
  width: 100%;
  /* height: 4.9rem; */
}
.content {
  background: #ffffff;
}
.header {
  width: 17.5rem;
  padding-top: 0.5rem;
  margin: auto;
  color: #101010;
  font-size: 0.7rem;
  text-align: center;
  background: #ffffff;
  border-bottom: 1px solid #eeeff2;
}
.header h2 {
  width: 3.22rem;
  font-size: 0.7rem;
  text-align: center;
  margin: auto;
  padding-bottom: 0.22rem;
  border-bottom: 0.25rem solid #3c7c45;
}

ul {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
}
ul li {
  width: 25%;
  align-self: center;
  font-size: 0.6rem;
  color: #101010;
  text-align: center;
  margin-top: 0.75rem;
}
ul li img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
ul li p {
  margin-top: 0.5rem;
}
</style>